<template>
  <div id="app" style="height: 100%;margin: 0 auto">

    <el-container style="height: 100%">
      <el-header v-if="!(path =='/' || path ==='/register' )" style="background-color: #99a9bf;height: 8%;display: flex;justify-content: space-between;padding-left: 0px;align-content: center" >
        <div  style="display: flex;align-content: center">
          <img src="../src/assets/img/logo/logo.jpg" style="height: 100%">
<!--          <span><h2><font color="#f0ffff">小强个人系统</font></h2></span>-->
        </div>

        <el-dropdown class="user-name" trigger="click" @command="handleCommand"  style="margin-top: 1%">
  <span class="el-dropdown-link">
<!--                {{this.user.username}}-->
    <el-avatar   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="display: flex;margin-top: 1%">
        </el-avatar>
<!--  <i class="el-icon-caret-bottom"></i>-->
  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="selfDetail">个人中心</el-dropdown-item>
            <el-dropdown-item command="alterPwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>

      <el-container style="height: 87%;width: 100%">
        <el-aside v-show="!(path ==='/' || path ==='/register' )" style="background-color: cadetblue;">
          <el-menu @select="handleSelect" style="background-color: cadetblue" >
            <MenuList :menu="menu"></MenuList>
          </el-menu>
        </el-aside>
        <el-main style="height: 100%;background-color: #e5e9f2">

              <router-view></router-view>

          </el-main>

          <el-dialog
            title="修改密码"
            :visible.sync="dialogVisible"

            width="30%"

            style="height: 100%"
            center>

            <el-form ref="user" v-model="user" label-width="80px" style="align-content: center" :rules="rules">
              <el-form-item label="原始密码" prop="oldpwd">
                <el-input v-model="user.oldpwd"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newpwd">
                <el-input v-model="user.newpwd"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input v-model="user.checkPass"></el-input>
              </el-form-item>
              <el-form-item style="align-content: center">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="cancal">  取消</el-button>
              </el-form-item>

            </el-form>

          </el-dialog>


      </el-container>
      <el-footer v-show="!(path ==='/' || path ==='/register' )" style="height: 5%;background-color: #99a9bf">vv</el-footer>
    </el-container>

    <!--修改密码部分-->



  </div>
</template>

<script>
import instance from "./utils/request";
import MenuList from "./views/menu/MenuList";
import {MessageBox} from "element-ui";
export default {
  name: 'App',
  components: {MenuList},
  comments:{
    MenuList
  },
  data(){

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.user.checkPass !== '') {
          this.$refs.user.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      // circleUrl: this.user.photo,
      activeIndex: '/index',
      path:'',
      dialogVisible:false,
      user:{
        oldpwd: '',
        newpwd:'',
        checkPass: '',
        username:'',
        photo:''
      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      },
      menu:[],
      editableTabsValue: '2',
      editableTabs: [{
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: 'Tab 2',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2

    }
  },
  methods: {



      //点击头像下拉事件选择
    handleCommand(command) { //
      if (command == 'logout') { // handleCommand函数点击事件，传入command属性上的值
        localStorage.removeItem('user');  // 从localStorage中移除userName键的值
        localStorage.removeItem('token');
        this.$router.push("/")   // 新增一个路由界面，即立即跳转到根目录
      }
      if(command == 'selfDetail'){
        this.$router.push("/userdetail");
      }
      if(command == 'alterPwd'){
        this.dialogVisible = true;
      }

    },

    handleSelect(key, keyPath) {
      this.$router.push(key);
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },

    //点击对应的导航菜单进行页面跳转
    handleClose(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
    },

    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    },

    //修改密码提交事件
    onSubmit(){
      instance.post("/user/alterPwd",
        this.user.newpwd+","+this.user.oldpwd
      ).then(res=>{
        if(res.data.code == "200"){
          MessageBox.alert(res.data.msg,{
            callback:action => {
              window.location.href = "/"
            }
          });
          this.dialogVisible = false;
        }else {
          MessageBox.alert(res.data.msg);
        }
      }).cache(err=>{
        alert("内部服务器错误");
      })
    },
    cancal(){
      this.dialogVisible = false;
    }

  },
  created() {
    console.log(1111111111);

    instance.get("/user/menu").then(res=>{
      console.log(res.data.data);
      this.menu = res.data.data;

    }).catch(err=>{
      alert("菜单查询出错");
    });

    //获取前端浏览器存储的用户信息
      var userJson = localStorage.getItem('user');
      console.log(JSON.parse(userJson));
      this.user =  JSON.parse(userJson);
      console.log(1);
      console.log(this.user.username);
      // console.log(this.user.photo);




    },
  mounted() {
    this.path = this.$route.path;
    console.log(this.$route.path)
  },
  watch:{
    $route(to,from){
      this.path = to.path
    }
  }
}
</script>

<style>
#app {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
}
</style>
